<template>
  <div class=""></div>
</template>

<script>
import * as THREE from 'three';
export default {
  name: '',
  components: {},
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      cube: null,
    };
  },
  watch: {},
  created() {},
  mounted() {
    this.init();
    this.animate();
  },
  methods: {
    init() {
      this.scene = new THREE.Scene();

      this.camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );

      // 移动相机位置
      this.camera.position.z = 5;

      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.$el.appendChild(this.renderer.domElement);

      const geometry = new THREE.BoxGeometry(); // 三个参数缺省,默认为1，1，1
      // const geometry = new THREE.BoxGeometry(1, 1, 1);
      // const geometry = new THREE.BoxGeometry(1.5, 1.5, 1.5);
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      this.cube = new THREE.Mesh(geometry, material);
      this.scene.add(this.cube);

      var geometry_02 = new THREE.CircleGeometry(1, 3); //5 32
      var material_02 = new THREE.MeshBasicMaterial({ color: 0xffff00 });
      var cube_02 = new THREE.Mesh(geometry_02, material_02);
      cube_02.position.set(1.5, 1, 1.5); // 设置初始位置
      this.scene.add(cube_02);
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.cube.rotation.x += 0.01;
      this.cube.rotation.y += 0.01;

      this.renderer.render(this.scene, this.camera);
    },
  },
};
</script>

<style scoped lang="scss"></style>
